<template>
	<view class="uni_box home">
		<navbar title='我的提问' :yin="true">
		</navbar>
		<view class="content">
			<view class="tione">
				<view class="tiview">
					<block v-for="(item,index) in total" :key="index">
						<view class="tione">
							<text class="tiname">{{item.nums}}</text>
							<text class="miao">{{item.title}}</text>
						</view>
						<view class="xian" v-if="index!=total.length-1"></view>
					</block>
					<!-- <view class="tione">
						<text class="tiname">67</text>
						<text class="miao">收藏数</text>
					</view>
					<view class="xian"></view>
					<view class="tione">
						<text class="tiname">128</text>
						<text class="miao">点赞数</text>
					</view> -->
				</view>
			</view>
			<view class="titwo">
				<u-tabs :list="tablist" :is-scroll="false" :current="tabcurrent" @change="tabchange" active-color="#E8433A" inactive-color="#999" font-size="25"></u-tabs>
			</view>
			<view class="jian"></view>
			<view class="tilist">
				<view class="wenone">
					<u-input v-model="keywords" type="text" :border="false" placeholder="请输入关键词搜索"/>
					<view class="sou" @click="getClear">搜索</view>
				</view>
				<view class="wentwo">
					<view class="wenitem" v-for="(item,index) in list" :key="index" @click="getDetail(item)">
						<view class="wenzt" :class="item.status==1?'yida':''">
							{{ item.status_text }}
						</view>
						<view class="wennav">
							<text class="wenname">{{ item.title }}</text>
							<view class="wenbot">
								<text class="qian">{{ item.cate_name }}  {{item.level_name}}</text>
								<text class="qian">提问时间：{{item.createtime}}</text>
								<text class="qian">浏览 {{ item.views }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 底部 -->
			<view class="dabot">
				<view class="dalfet" @click="getshouye">
					<image class="fankui" src="@/pages_subject/static/img/fankui.png" mode="" />
					<text class="daname">答疑首页</text>
				</view>
				<view class="dalfet tbtn" @click="gettiwen">
					<image class="fankui" src="@/pages_subject/static/img/bianji.png" mode="" />
					<text class="daname">我要提问</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tablist:[
					// {
					// 	name: '我的提问'
					// }, {
					// 	name: '我的收藏'
					// }, {
					// 	name: '我的点赞'
					// }
				],
				tabcurrent:0,
				value:'',
				total:[],
				type:[],
				typeinfo:{},
				keywords:'',
				list: [],
				page: 1,
				limit: 10,
				last_page: 1,
				status: "loadmore",
			}
		},
		onLoad() {
			
		},
		onShow() {
			this.page = 1
			this.getdyi()
		},
		
		onReachBottom: function () {
			this.loadmore();
		},
		methods: {
			async getdyi(){
				let res = await this.$u.api.getMyQuestionParams({
				});
				this.total = res.total
				this.type = res.type
				this.typeinfo = res.type[0]
				let data = res.type
				let shuzu = []
				for(let i in data){
					let a = {}
					a.name = data[i].title
					a.value = data[i].value
					shuzu.push(a)
				}
				this.tablist = shuzu
				this.getList()
			},
			// async getList(){
			// 	let res = await this.$u.api.getMyQuestionList({
			// 		type:this.typeinfo.value,
			// 		keywords:this.keywords,

			// 	});
			// },
			async getList(){
				let res = await this.$u.api.getMyQuestionList({
					page:this.page,
					type:this.typeinfo.value,
					keywords:this.keywords,
				});
				this.last_page = res.lastpage;
				let list = res.list;
				this.list = this.page == 1 ? list : [...this.list, ...list];
				if(this.page >= this.last_page){
				  this.status = 'nomore';
				}
			},
			loadmore() {
				let page = this.page;
				// let last_page = this.last_page;
				if (this.status == 'loadmore') {
					this.page++;
					this.getList();
				}
			},
			getClear(){
				this.list = []
				this.page = 1,
				this.status= "loadmore"
				this.getList()
			},
			tabchange(e){
				this.tabcurrent = e
				let typeinfo = this.typeinfo
				typeinfo = this.type[e]
				this.typeinfo = typeinfo
				this.getClear()
			},
			getshouye(){
				this.navrouter("/pages_subject/twoPage/MinePage/DayiList");
				
			},
			gettiwen(){
				this.navrouter("/pages_subject/twoPage/MinePage/TiQuestion?type=2");
			},
			getDetail(){
				this.navrouter("/pages_subject/twoPage/MinePage/WenDetail");
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #fff;
	}
	.content{
		background-color: #fff;
		padding-bottom: 130rpx;
		.dabot{
			position: fixed;
			width: 100%;
			height: 120rpx;
			z-index: 100;
			background: #FFFFFF;
			display: flex;
			align-items: center;
			padding: 0 30rpx;
			bottom: 0;
			left: 0;
			justify-content: space-between;
			box-shadow: 0rpx -10rpx 20rpx 0rpx rgba(202,205,217,0.14);
			.dalfet{
				width: 47%;
				display: flex;
				align-items: center;
				justify-content: center;
				background: #F8F8F8;
				border-radius: 40rpx;
				height: 80rpx;
				text{
					font-weight: 500;
					font-size: 24rpx;
					color: #111111;
				}
				.fankui{
					width: 24rpx;
					height: 22rpx;
					margin-right: 10rpx;
				}
			}
			.tbtn{
				background: linear-gradient(-90deg, #4483F6, #71BEFF);
				text{
					color: #fff;
				}
			}
		}
		.tione{
			background: #FF8B50;
			height: 136rpx;
			position: relative;
			.tiview{
				position: relative;
				width: 100%;
				height: 100%;
				display: flex;
				flex-direction: row;
				align-items: center;
				.tione{
					width: 33%;
					height: 100%;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					.tiname{
						font-family: DIN;
						font-weight: bold;
						font-size: 28rpx;
						color: #FFFFFF;
					}
					.miao{
						font-weight: 400;
						font-size: 22rpx;
						color: #FFE5D8;
						display: block;
						margin-top: 10rpx;
					}
				}
				.xian{
					display: inline-block;
					width: 1rpx;
					height: 40rpx;
					background: #FFB38D;
				}
			}
		}
		.titwo{
			padding: 20rpx 0 0;
		}
		.jian{
			height: 30rpx;
			background: #F6F7FB;
		}
		.tilist{
			padding: 40rpx 30rpx;
			.wenone{
				background: #FFFFFF;
				box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(202,205,217,0.3);
				border-radius: 40rpx;
				display: flex;
				flex-direction: row;
				align-items: center;
				// padding: 8rpx;
				height: 80rpx;
				padding: 20rpx 10rpx 20rpx 30rpx;
				/deep/.u-input{
					margin-right: 20rpx;
				}
				.sou{
					margin-left: auto;
					height: 64rpx;
					background: linear-gradient(-90deg, #FA4E4E, #FD894F);
					border-radius: 32rpx;
					width: 140rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 22rpx;
					color: #FFFFFF;
				}
			}
			.wentwo{
				.wenitem{
					border-bottom: 1rpx solid #eee;
					padding: 30rpx 0;
					display: flex;
					flex-direction: row;
					.wenzt{
						padding: 10rpx 14rpx;
						height: 72rpx;
						background: #FEF6F2;
						border-radius: 4rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						font-family: PingFang SC;
						font-weight: 500;
						font-size: 22rpx;
						color: #FA7938;
						line-height: 30rpx;
						margin-right: 20rpx;
					}
					.yida{
						background: #F1F7F3;
						color: rgba(70, 197, 100, 1);
					}
					.wennav{
						display: flex;
						flex-direction: column;
						flex: 1;
						.wenname{
							font-family: PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #111111;
							display: block;
							// margin-bottom: 0rpx;
						}
						.wenbot{
							margin-top: 32rpx;
							display: flex;
							flex-direction: row;
							align-items: center;
							justify-content: space-between;
							.qian{
								font-family: PingFang SC;
								font-weight: 400;
								font-size: 20rpx;
								color: #999999;
							}
						}
					}

				}
			}
		}
		// padding-bottom: 150rpx;
	}
</style>
